<!DOCTYPE html> 
<html> 
	<head>
  <meta charset="UTF-8">	
	<title>Restaurant Picker</title> 
	
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="css/jquery.mobile.structure-1.0.1.css" />
	<link rel="apple-touch-icon" href="images/launch_icon_57.png" />
	<link rel="apple-touch-icon" sizes="72x72" href="images/launch_icon_72.png" />
	<link rel="apple-touch-icon" sizes="114x114" href="images/launch_icon_114.png" />
	<link rel="stylesheet" href="css/jquery.mobile-1.0.1.css" />
	<link rel="stylesheet" href="css/custom.css" />
	<script src="js/jquery-1.7.1.min.js"></script>
	<script src="js/jquery.mobile-1.0.1.min.js"></script>
	<script src="js/jquery.localize.js"></script>
	<script src="js/funciones.js"></script>
</head>
<body> 
<div data-role="page" id="home" data-theme="c">

	<div data-role="content">
	
	<div id="branding">
		<h1>Restaurant Picker </h1>
	</div>
	
	<div class="choice_list"> 
	<h1 data-localize="choose-food">What would you'd like to eat?</h1>
	
	<ul id="buttonFood" data-role="listview" data-inset="true" >
	<li><a id="sushi" href="#" data-transition="slidedown"> <img src="images/sushis.jpg"/> <h3>Sushi</h3></a></li>
	<li><a id="pizza" href="#" data-transition="slidedown"> <img src="images/pizza.jpg"/> <h3>Pizza</h3></a></li>
	<li><a id="kebab" href="#" data-transition="slidedown"> <img src="images/kebap.jpg"/> <h3>Kebab</h3></a></li>
	<li><a id="burger" href="#" data-transition="slidedown"> <img src="images/burger.jpg"/> <h3 data-localize="burger">Burger</h3></a></li>
	<li><a id="any" href="#" data-transition="slidedown"> <img src="images/tradi.jpg"/> <h3 data-localize="any">Any Kind</h3></a></li>	
	</ul>	
	
	</div>
	</div>

	<label id="spinerText" class="ui-hidden-accessible" data-localize="spiner-text">loading</label>
	
</div><!-- /page -->
<script>
$(document).ready(function () {
	$("[data-localize]").localize("idioma", { pathPrefix: "lang", skipLanguage: /^en/ });
	$("#buttonFood a").click(loadFood);
});
function loadFood(){
	showLoadingSpiner();
	pickerSupport.loadPage('choose_restaurant.html?id='+this.id);
}
</script>
</body>
</html>
